<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Equalizer/>
            </n-icon>
            <Handle id="WordFrequency-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="WordFrequency-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>词频统计</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="词频统计" style="width: 500px;">
                <div class="title">
                    <span>词频统计表</span>

                </div>
                <div class="data">
                    <n-data-table
                        v-show="wordDetails.word === ''"
                        :columns="props.data.data.title"
                        :data="props.data.data.data"
                        :pagination="pagination"
                        style="height: 300px"
                        flex-height
                    />
                    <div v-show="wordDetails.word !== ''">
                        <div @click="setWordDetails({word:''})"><span class="pointer" style="float: right">X</span></div>
                        <n-scrollbar style="max-height: 400px" trigger="none">
                            <p v-for="index in wordDetails.sentence"><span v-html="index"></span></p>
                        </n-scrollbar>
                    </div>
                </div>
                <div v-show="wordDetails.word === ''">
                    <n-checkbox v-model:checked="isRemove">
                        移除词
                    </n-checkbox>
                    <n-input
                        type="textarea"
                        :disabled="true"
                        v-model:value="remove_word_computed"
                        placeholder="点击上方关键词添加"
                    />
                </div>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <!--                        <n-button @click="implementation">提取关键词</n-button>-->
                        <n-button @click="implementation">词频统计</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>
import {Equalizer} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";

const elements = useElementsStore()

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data', "id"])


function clickWord(word) {
    let item = remove_word.value.indexOf(word)
    if (item === -1) {
        // 没有则添加
        addRemoveWord(word)
    } else {
        // 点击的单词在删除列表中 移除
        removedRemoveWord(item)
    }

}

const wordDetails = ref({
    word: "",
    sentence: [],
    count: null,
})

function setWordDetails(row) {
    if (row.word === '') {
        wordDetails.value = {
            word: "",
            sentence: [],
            count: null,
        }
        return
    }
    wordDetails.value = {...row};
}
function addRemoveWord(word) {
    remove_word.value.push(word)
}

function removedRemoveWord(item) {
    remove_word.value.splice(item, 1)
}

const isRemove = ref(false)
const remove_word = ref([])
const remove_word_computed = computed(() => {
    let text = ''
    for (let i of remove_word.value) {
        text = text + i + ', '
    }
    return text
})

function implementation() {
    workApi.post("perform_tasks/word_frequency", {
        data: props.data.dict,
        remove_word: isRemove.value ? remove_word.value : [],
        old_data: props.data.text
    }).then(r => {
        props.data.data = r.data
        props.data.data.title[0].render = (row) => {
            return h(
                'span',
                {
                    class: 'span-button pointer',
                    onClick: () => {
                        clickWord(row.word)
                    }
                },
                {default: () => row.word}
            )
        }
        props.data.data.title.push({
            title: '操作',
            align: "center",
            titleAlign: 'center',
            key: 'actions',
            render(row) {
                return h(
                    'span',
                    {
                        class: 'span-button pointer',
                        onClick: () => {
                            setWordDetails(row)
                        }
                    },
                    {default: () => "查看"}
                )

            }
        })
    });
}

// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    wait: false,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        if (!popup.wait) {
            popup.show = false;
        }
    },
    reopen: () => {
        popup.show = true
    }
})

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        // 找线
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                // 找上级节点
                if (j.id === i['source']) {
                    console.log(j.data)
                    props.data.text = j.data.text
                    props.data.dict = j.data.data
                    console.log(props.data)
                    return
                }
            }
        }
    }
}

// 单页数据量
const pagination = {
    pageSize: 10
}

</script>

<style scoped lang="less">

</style>